<template>
  <div class="page">
    <div class="page_filter">
      <div class="page_filter">
        <el-select v-model="form.roadId" filterable clearable placeholder="选择路线" @change="changeRoad">
          <el-option
            v-for="item in roadList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <el-select v-model="form.roadSectionId" filterable clearable placeholder="选择标段">
          <el-option
            v-for="item in bidSectionList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
      </div>
    </div>
    <div class="page_main">
      <el-button icon="el-icon-circle-plus" @click="handleAdd" class="big_button" v-if="showZhengGai">下发整改通知单
      </el-button>
      <el-button icon="el-icon-circle-plus" @click="handleStopAdd" class="big_button" v-if="showTingGong"
                 style="background-color: #ff4d51">下发停工通知单
      </el-button>
      <el-button icon="el-icon-circle-plus" @click="handleReportAdd" class="big_button" v-if="showShangBao"
                 style="background-color: #FFA500">上报重大隐患
      </el-button>
      <!-- table -->
      <el-table
        :data="tableList"
        border>
        <el-table-column
          label="序号"
          fixed
          width="80">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="noticeTypeName" width="120" label="通知单类型">
          <template slot-scope="scope">
            <el-tag size="mini" :style="scope.row.noticeTypeName | gradeNoticeColor" class="s-white">
              {{scope.row.noticeTypeName}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="checkUnitName"
          min-width="220"
          label="下发/上报单位">
        </el-table-column>
        <el-table-column
          prop="checkUnitTypeName"
          label="单位类型">
        </el-table-column>
        <el-table-column
          prop="checkUserName"
          label="操作人">
        </el-table-column>
        <el-table-column
          prop="createTime"
          width="180"
          label="操作时间">
          <template slot-scope="scope">{{scope.row.createTime | formatTimer}}</template>
        </el-table-column>
        <el-table-column prop="checkStatusName" width="138" label="状态">
          <template slot-scope="scope">
            <el-tag size="mini" :type="scope.row.checkStatusName | gradeCheckColor">
              {{formatCheckStatus(scope.row.checkStatusName,scope.row.overStatus)}}
            </el-tag>
          </template>

        </el-table-column>
        <el-table-column
          prop="receiveTypeName"
          width="100"
          label="签收状态">
        </el-table-column>
        <el-table-column
          prop="rectificationTime"
          width="120"
          label="整改截止日期">
          <template slot-scope="scope">{{scope.row.rectificationTime | formatTimer2}}</template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          min-width="240">
          <template slot-scope="scope">
            <button type="text" class="btn_edit" @click="handleDetail(scope.row)">详情</button>
            <button class="btn_edit_gj" @click="handleRecord(scope.row)">轨迹</button>
            <button class="btn_edit" @click="downloadDoc(scope.row)">下载通知书</button>
            <!--施工单位-->
            <el-popconfirm title="签收确认！" @confirm="signForRectification(scope.row.id)">
              <button class="btn_edit_cs" v-if="showButton(scope.row.receiveTypeName)" slot="reference">
                签收
              </button>
            </el-popconfirm>
            <!--施工单位-->
            <button class="btn_edit_xh" v-if="showButton5(scope.row)"
                    @click="handleCancel(scope.row)">
              销号
            </button>
            <button class="btn_edit_xh"
                    v-if="showButton1(scope.row.checkStatusName,scope.row.checkUnitTypeName,scope.row.receiveTypeName)"
                    @click="handleApply(scope.row)">
              申请销号
            </button>
            <!--驻地办、总监办、不同状态展示-->
            <el-popconfirm :title="popconfirmTitle(scope.row.checkStatusName)" @confirm="handleReport(scope.row)"
                           v-if="showButton2(scope.row.checkStatusName)">
              <button class="btn_edit_sb" slot="reference">
                上报隐患
              </button>
            </el-popconfirm>

            <!--驻地办、总监办、建设单位、监管单位、不同状态展示-->
            <button class="btn_edit_xh" v-if="showButton3(scope.row.checkStatusName)" @click="handleCheck(scope.row)">
              整改核查
            </button>
            <!--总监办,已上报建设单位&&检查单位是驻地办-->
            <button class="btn_edit_xh" v-if="showButton4(scope.row)" @click="handleStop(scope.row)">下发停工通知</button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-size="form.pageSize"
           :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"
        :total="form.total">
      </el-pagination>
    </div>
    <!-- 申请销号 -->
    <el-dialog title="申请销号"
               :visible.sync="showApply"
               :close-on-click-modal="false"
               :close-on-press-escape="false" width="750px">
      <form-check-cancel v-model="currentRow" ref="formCancel" model="销号"></form-check-cancel>
      <p class="button-submit">
        <el-button size="medium" @click="showApply = false" style="margin-right: 20px">取消</el-button>
        <el-popconfirm title="确定提交销号申请吗？" @confirm="validatorFormCancel('formCancel')">
          <el-button slot="reference" size="medium" type="primary">提交申请</el-button>
        </el-popconfirm>
      </p>
    </el-dialog>
    <!-- 整改销号 -->
    <el-dialog title="整改销号"
               :visible.sync="showCancel"
               :close-on-click-modal="false"
               :close-on-press-escape="false" width="750px">
      <form-check-cancel v-model="currentRow" ref="formCancel" model="销号"></form-check-cancel>
      <p class="button-submit">
        <el-button size="medium" @click="showCancel = false" style="margin-right: 20px">取消</el-button>
        <el-popconfirm title="确定进行销号吗？" @confirm="validatorFormCancel('formCancel')">
          <el-button slot="reference" size="medium" type="primary">销号</el-button>
        </el-popconfirm>
      </p>
    </el-dialog>
    <!-- 整改核查 -->
    <el-dialog title="整改核查"
               :visible.sync="showCheck"
               :close-on-click-modal="false"
               :close-on-press-escape="false" width="750px">
      <form-check-cancel v-model="currentRow" ref="formCancel" model="核查"></form-check-cancel>
      <p class="button-submit">
        <el-button size="medium" @click="showCheck = false" style="margin-right: 20px">取消</el-button>
        <el-popconfirm title="确认驳回申请吗？" @confirm="submitCheck(false)">
          <el-button class="btn_edit1640" slot="reference" size="medium" type="primary" style="margin-right: 20px">驳回
          </el-button>
        </el-popconfirm>
        <el-popconfirm title="确定核查通过吗？" @confirm="submitCheck(true)">
          <el-button slot="reference" size="medium" type="primary">核查通过</el-button>
        </el-popconfirm>
      </p>
    </el-dialog>
    <!-- 排查详情 -->
    <el-dialog
      :close-on-click-modal="false"
      title="排查详情"
      :visible.sync="isShowDetailDialog"
      width="800px">
      <slope-detail :key="timer" :currentRow="investigation" :model="2" v-if="isSlope" :isLook="false"></slope-detail>
      <geology-detail :key="timer" :currentRow="investigation" :model="2" v-else :isLook="false"></geology-detail>
    </el-dialog>
    <!-- 新增通知单 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="isShowDialog"
      width="950px">
      <el-steps :active="active" finish-status="success" align-center simple>
        <el-step title="选择排查记录">
        </el-step>
        <el-step :title="title">
        </el-step>
      </el-steps>
      <div v-if="active === 0">
        <!-- 选择列表-->
        <div class="search_view_dia">
          <el-select v-model="currentRow.roadId" filterable clearable placeholder="选择路线" @change="changeRoad2">
            <el-option
              v-for="item in roadList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-select v-model="currentRow.roadSectionId" filterable clearable placeholder="选择标段">
            <el-option
              v-for="item in sectionList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-button class="common_btn-defalut" icon="el-icon-search" @click="queryInvestigationList()">搜索
          </el-button>
        </div>
        <el-table ref="multipleTable" :data="investigationList || []" border
                  @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="60">
          </el-table-column>
          <el-table-column
            label="序号"
            fixed
            width="70">
            <template slot-scope="scope">
              {{getIndex2(scope.$index)}}
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            show-overflow-tooltip
            width="200"
            label="隐患点">
          </el-table-column>
          <el-table-column
            prop="typeName"
            width="120"
            label="隐患类型">
          </el-table-column>
          <el-table-column prop="dangerLevelName" min-width="120" sortable label="隐患等级">
            <template slot-scope="scope">
              <el-tag size="mini" :style="scope.row.dangerLevelName | gradeDangerColor" class="s-white">
                {{scope.row.dangerLevelName}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            width="120"
            prop="constructionUnitName"
            show-overflow-tooltip
            label="排查单位">
          </el-table-column>
          <el-table-column prop="createTime" width="120" label="排查日期">
            <template slot-scope="scope">{{scope.row.createTime | formatTimer2}}</template>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            width="120">
            <template slot-scope="scope">
              <button type="text"
                      class="btn_edit"
                      @click="checkInvestigationDetail(scope.row)">
                查看详情
              </button>
            </template>
          </el-table-column>
        </el-table>
        <div class="button-foot">
          <el-tooltip :disabled="multipleSelection.length > 0" effect="light" content="请先选择排查单" placement="top">
            <el-button size="medium" type="primary" class="stepNext" @click="nextStep">下一步</el-button>
          </el-tooltip>
        </div>
      </div>
      <div v-if="active === 1">
        <el-form ref="form" label-position="right" :rules="rules" :model="currentRow" label-suffix="："
                 label-width="120px">
          <el-form-item :label="currentRow.noticeType === 1?'说明':'整改建议'" prop="advice">
            <el-input v-model="currentRow.advice" type="textarea" :rows="10" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item v-if="currentRow.noticeType !== 1" label="整改截止日期" prop="rectificationTime">
            <el-date-picker
              v-model="currentRow.rectificationTime"
              type="date"
              placeholder="选择整改截止日期">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div class="button-foot">
          <el-button size="medium" type="primary" plain @click="lastStep">上一步</el-button>
          <el-button size="medium" type="success" @click="validateRoadForm">提交</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 小按钮停工通知 -->
    <el-dialog
      :close-on-click-modal="false"
      title="停工通知"
      :visible.sync="showStop"
      width="950px">
      <el-form ref="form" label-position="right" :rules="rules" :model="currentRow" label-suffix="："
               label-width="120px">
        <el-form-item label="整改建议" prop="advice">
          <el-input v-model="currentRow.advice" type="textarea" :rows="10" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="整改截止日期" prop="rectificationTime">
          <el-date-picker
            v-model="currentRow.rectificationTime"
            type="date"
            placeholder="选择整改截止日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="button-foot">
        <el-button size="medium" type="success" @click="submitStop">提交</el-button>
      </div>
    </el-dialog>
    <!--    通知单详情-->
    <el-dialog
      :close-on-click-modal="false"
      title="详情"
      :visible.sync="isShowNoticeDetailDialog"
      width="900px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{currentRow.noticeType === 1?'说明':'整改建议'}}</span>
          <span style="float: right; padding: 3px 0" v-if="currentRow.noticeType !== 1">整改截止时间：{{currentRow.rectificationTime | formatTimer2}}</span>
        </div>
        <div class="text">
          {{currentRow.advice}}
        </div>
      </el-card>
      <el-card v-if="fileList2" class="box-card">
        <div class="geology-children">
          证明材料
        </div>
        <div v-for="(item,index) in fileList2" :key="index"
             style="text-align: center;display: inline-block;margin-left: 20px;font-size: 15px">
          <a :download="item.name" :href="item.url" style="color:black">
            <i class="iconfont iconPDF" style="font-size: 70px;color:red"></i>
            <br/>
            {{item.name}}
          </a>
        </div>
        <div class="geology-children">
          说明
        </div>
        <el-form-item>
          <el-input v-model="currentRow.rectificationRemark" clearable type="textarea" :rows="4"></el-input>
        </el-form-item>
        <div class="text">
          {{currentRow.advice}}
        </div>
      </el-card>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>排查清单</span>
        </div>
        <div style="font-weight: 500">
          <el-table ref="multipleTable" :data="currentRow.investigationList || []" border>
            <el-table-column
              label="序号"
              fixed
              width="70">
              <template slot-scope="scope">
                {{getIndex2(scope.$index)}}
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              show-overflow-tooltip
              width="250"
              label="隐患点">
            </el-table-column>
            <el-table-column
              prop="typeName"
              width="140"
              label="隐患类型">
            </el-table-column>
            <el-table-column
              prop="constructionUnitName"
              show-overflow-tooltip
              label="排查单位">
            </el-table-column>
            <el-table-column prop="createTime" width="120" label="排查日期">
              <template slot-scope="scope">{{scope.row.createTime | formatTimer2}}</template>
            </el-table-column>
            <el-table-column
              label="操作"
              fixed="right"
              width="120">
              <template slot-scope="scope">
                <button type="text"
                        class="btn_edit"
                        @click="checkInvestigationDetail(scope.row)">
                  查看详情
                </button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </el-dialog>
    <!-- 操作记录-->
    <el-dialog title="轨迹"
               :visible.sync="showGeologyRecord"
               :close-on-click-modal="false"
               @open="init"
               :close-on-press-escape="false" width="200px">
      <investigate-operation ref="operation" :id="investigateId"></investigate-operation>
    </el-dialog>
    <picture-viewer ref="imageViewer"></picture-viewer>
  </div>
</template>

<script>
import {
  getInvestigationList,
  getSlopeInvestigationDetail,
  getRoadInvestigationDetail,
  addRectificationNotice,
  getNoticeList,
  getNoticeInvestigateList,
  receiveRectificationNotice,
  upRectificationNotice,
  cancelRectificationNotice,
  stopRectificationNotice,
  downloadRectificationNoticeBackDoc,
  downloadRectificationNoticeDoc
} from '@/services/model/investigation'
import Enums from '@/utils/enums'
import ItemMixins from "./modules/item.mixins";
import GeologyDetail from "./modules/geology-detail";
import SlopeDetail from "./modules/slope-paicha-detail";
import PictureViewer from '@/components/picture-viewer/index-name'
import InvestigateOperation from './modules/investigate-operation'
import FormCheckCancel from "./modules/form-check-cancel";
// form表单校验规则

const RULES = {
  // advice: {required: true, message: '请输入整改建议'},
  // rectificationTime: {required: true, message: '请选择整改截止时间'},
}

export default {
  components: {PictureViewer, GeologyDetail, SlopeDetail, InvestigateOperation, FormCheckCancel},
  mixins: [ItemMixins,Enums],
  data() {
    return {
      title: "下发整改通知单",
      active: 0,
      timer: '',
      // 表单
      form: {
        page: 1,
        pageSize: 10
      },
      // 列表数据
      tableList: [],
      rules: RULES,
      investigateId: '',
      // 展示添加路段弹窗
      isShowDetailDialog: false,
      showReport: false,
      showGeologyRecord: false,
      showApply: false,
      showStop: false,
      showCancel: false,
      showCheck: false,
      isShowDialog: false,
      // 当前操作的数据对象
      currentRow: {},
      investigation: {},
      roadRow: {},
      investigationList: [],
      isSlope: false,
      isShowNoticeDetailDialog: false,
      multipleSelection: [],
    }
  },
  computed: {
    fileList2() {
      return this.filePathHandle(this.currentRow.rectificationFileList)
    },
    applyOrCancelInfo() {
      let unitType = this.$store.state.userInfo.unitType
      if (unitType === 6 && this.currentRow) {
        return '确定进行销号吗？'
      } else if (unitType === 2) {
        return '确定想监管单位提交销号申请吗？'
      } else {
        return '确定想建设单位提交销号申请吗？'
      }
    },
    //非总监办和监管单位展示整改通知单
    showZhengGai() {
      return this.$store.state.userInfo.unitType !== 7 && this.$store.state.userInfo.unitType !== 1
    },
    //仅建设单位 展示停工通知单大按钮
    showTingGong() {
      return this.$store.state.userInfo.unitType === 2
    },
    //施工单位、驻地办展示上报大按钮
    showShangBao() {
      return this.$store.state.userInfo.unitType === 5 || this.$store.state.userInfo.unitType === 6
    },
  },
  filters: {},
  activated() {
    this.queryList()
  },
  mounted() {
    this.queryDictList(['EnumRoadGrade'], ['roadGradeList']);
    this.getRoadList();
  },
  methods: {
    async downloadDoc(row) {
      if (row.noticeTypeName !== '隐患上报') {
        await downloadRectificationNoticeDoc({id: row.id})
      }
      if (row.checkStatusName === '已销号') {
        await downloadRectificationNoticeBackDoc({id: row.id})
      }
    },
    async submitStop() {
      let res = await stopRectificationNotice(this.currentRow)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: '下发成功'
        })
        this.showStop = false
        this.queryList()
      }
    },
    //停工通知
    handleStop(row) {
      this.currentRow = JSON.parse(JSON.stringify(row))
      this.showStop = true
    },
    // 整改核查
    async submitCheck(chekcStatus) {
      this.currentRow.isCheck = chekcStatus
      let res = await cancelRectificationNotice(this.currentRow)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: chekcStatus ? '销号成功' : '驳回成功'
        })
        this.showCheck = false
        this.queryList()
      }
    },
    // 销号申请提交
    async submitCancel() {
      this.currentRow.isCheck = true
      let res = await cancelRectificationNotice(this.currentRow)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: this.showCancel ? '销号成功！' : '申请成功，等待核查！'
        })
        this.showCancel = false
        this.showApply = false
        this.queryList()
      }
    },
    //销号表申请单校验
    validatorFormCancel(name) {
      if (name) {
        this.$refs[name]._validatorForm().then((res) => {
          this.submitCancel()
        })
      }
    },
    //销号申请
    handleApply(row) {
      this.currentRow = JSON.parse(JSON.stringify(row))
      this.showApply = true
    },
    //销号
    handleCancel(row) {
      this.currentRow = JSON.parse(JSON.stringify(row))
      this.showCancel = true
    },
    //销号核查
    handleCheck(row) {
      this.currentRow = JSON.parse(JSON.stringify(row))
      this.showCheck = true
    },
    //驻地办、总监办、不同状态展示 上报隐患小按钮
    popconfirmTitle(checkStatusName) {
      if (checkStatusName === '已上报驻地办') {
        return '确定上报到总监办吗？'
      } else if (checkStatusName === '已上报总监办') {
        return '确定上报到建设单位吗？'
      } else {
        return false
      }
    },
    //上报隐患
    async handleReport(row) {
      this.currentRow = JSON.parse(JSON.stringify(row))
      this.currentRow.isCheck = true
      let res = await upRectificationNotice(this.currentRow)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: '上报成功'
        })
        this.queryList()
      }
    },
    //签收通知单
    async signForRectification(id) {
      let res = await receiveRectificationNotice({id: id})
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: '签收成功'
        })
        this.queryList()
      }
      this.queryList();
    },
    //施工单位展示签收小按钮
    showButton(receiveTypeName) {
      if (receiveTypeName === '未签收') {
        return this.$store.state.userInfo.unitType === 6
      }
      return false
    },
    //施工单位下发的 展示销号小按钮
    showButton5(row) {
      if ((row.checkStatusName === '待整改' || row.checkStatusName === '整改超时') && row.checkUnitTypeName === '施工单位' && row.receiveTypeName === '已签收') {
        return this.$store.state.userInfo.unitType === 6
      }
      return false
    },
    //施工单位展示销号申请小按钮
    showButton1(checkStatusName, checkUnitTypeName, receiveTypeName) {
      if (receiveTypeName !== '未签收') {
        return false
      }
      //上报到建设单位后才能申请销号
      if (checkStatusName === '已上报建设单位' || checkStatusName === '销号驳回') {
        return this.$store.state.userInfo.unitType === 6
        //不是施工单位下发的才展示
      } else if ((info.checkStatusName === '待整改' || info.checkStatusName === '整改超时') && checkUnitTypeName !== '施工单位') {
        return this.$store.state.userInfo.unitType === 6
      }
      return false
    },
    //驻地办、总监办、不同状态展示 上报隐患小按钮
    showButton2(checkStatusName) {
      if (checkStatusName === '已上报驻地办') {
        return this.$store.state.userInfo.unitType === 5
      } else if (checkStatusName === '已上报总监办') {
        return this.$store.state.userInfo.unitType === 7
      } else {
        return false
      }
    },
    // 驻地办、总监办、建设单位、监管单位、不同状态展示
    showButton3(checkStatusName) {
      if (checkStatusName === '申请销号') {
        return this.$store.state.userInfo.unitType === 5
      } else if (checkStatusName === '驻地办核查通过') {
        return this.$store.state.userInfo.unitType === 7
      } else if (checkStatusName === '总监办核查通过') {
        return this.$store.state.userInfo.unitType === 2
      } else if (checkStatusName === '建设单位核查通过') {
        return this.$store.state.userInfo.unitType === 1
      } else {
        return false
      }
    },
    //驻地办上报的重大隐患，已上报建设单位后，总监办可下发停工通知
    showButton4(row) {
      if (row.checkStatusName === '已上报建设单位' && row.checkUnitTypeName === '驻地办') {
        return this.$store.state.userInfo.unitType === 7
      }
      return false
    },
    init() {
      this.$nextTick(() => {
        this.$refs.operation.getInvestigateOperation(this.investigateId)
      })
    },
    //查看操作记录时间线
    handleRecord(row) {
      this.showGeologyRecord = true
      this.investigateId = row.id
    },
    nextStep() {
      if (this.multipleSelection.length < 1) {
        return
      }
      this.active++
    },
    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    // 获取当前的序号
    getIndex2(index) {
      let param = index + 1
      return param
    },
    lastStep() {
      this.active--
      if (this.multipleSelection) {
        this.$nextTick(() => { // 保持选
          this.multipleSelection.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 表单提交
    validateRoadForm() {
      let investigateList = []
      this.multipleSelection.map(x => {
        const item = {}
        item.id = x.id
        item.type = x.type
        investigateList.push(item)
      })
      this.currentRow.investigateList = investigateList
      this.$refs.form.validate((valid) => {
        valid && this.submitForm()
      })
    },
    async submitForm() {
      let res = await addRectificationNotice(this.currentRow)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: '添加成功'
        })
        this.isShowDialog = false
        this.queryList()
      }
    },
    //勾选排查单
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 查看排查详情信息
    async checkInvestigationDetail(row) {
      this.timer = new Date().getTime()
      this.isSlope = false
      let action = getRoadInvestigationDetail
      if (row.type === 6) {
        this.isSlope = true
        action = getSlopeInvestigationDetail
      }
      let {data} = await action({id: row.id})
      if (data) {
        this.investigation = JSON.parse(JSON.stringify(data))
      }
      this.isShowDetailDialog = true
    },
    //查询边坡及公路排查记录
    async queryInvestigationList() {
      if (!this.currentRow.roadSectionId) {
        this.$notify({
          type: 'warning',
          title: '提示',
          message: '请先选择路线标段'
        })
        return
      }
      const {data} = await getInvestigationList({
        roadSectionId: this.currentRow.roadSectionId,
        roadId: this.currentRow.roadId,
        dangerLevel: this.currentRow.dangerLevel
      });
      this.investigationList = data || []
    },
    //选择路线
    changeRoad() {
      this.$set(this.form, 'roadSectionId', ''); //强制刷新 https://blog.csdn.net/PGguoqi/article/details/90240650
      this.bidSectionList = []
      const {roadId} = this.form
      this.getBidSectionList(roadId)
    },
    //选择路线
    changeRoad2() {
      this.$set(this.currentRow, 'roadSectionId', ''); //强制刷新 https://blog.csdn.net/PGguoqi/article/details/90240650
      this.sectionList = []
      const {roadId} = this.currentRow
      this.getBidSectionList(roadId)
    },

    showForm() {
      this.currentRow = {}
      this.investigationList = []
      this.multipleSelection = []
      this.isShowDialog = true
      this.active = 0
    },
    //隐患上报
    handleReportAdd() {
      this.title = "上报重大隐患"
      this.showForm()
      this.currentRow.noticeType = 1
      this.currentRow.dangerLevel = 2
    },
    //下发整改通知
    handleAdd() {
      this.title = "下发整改通知"
      this.showForm()
      this.currentRow.noticeType = 2
      this.currentRow.dangerLevel = 1
    },
    //下发停工通知
    handleStopAdd() {
      this.title = "下发停工通知"
      this.showForm()
      this.currentRow.noticeType = 3
      this.currentRow.dangerLevel = 2
    },
    //查看通知详情
    async handleDetail(row) {
      this.currentRow = JSON.parse(JSON.stringify(row))
      const {data} = await getNoticeInvestigateList({id: this.currentRow.id})
      this.currentRow.investigationList = data
      this.isShowNoticeDetailDialog = true
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val
      this.queryList()
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.queryList()
    },
    // 数据查询
    async queryList() {
      const {data} = await getNoticeList(this.form)
      let tableList = data?.records || []
      this.tableList = tableList
      this.form.size = Number(data?.size)
      this.form.total = Number(data?.total)
    }
  }
}
</script>

<style lang="less" scoped>
  .stepNext{
    width: 20% !important;
    color:white;
    background:#1990FE ;

  }
/deep/.el-step__title.is-process{
  color: #1990FE!important;
}
  .el-popconfirm {
    .el-button--text {
      color:#1990FE !important;
    }
  }
/deep/.el-step__icon{
  border-color:#1990FE !important;
}
/deep/.el-step__head.is-wait{
  border-color:#C0C4CC !important;

}
.text {
    font-size: 15px;
    padding-left: 20px;
    font-weight: 500;
    color: black;
  }

  .box-card {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 600;
    color: #1990FE;
  }

  .search_view_dia {
    margin-bottom: 20px;

    .el-select {
      margin-right: 20px;
    }
  }

  .el-table {
    /deep/ .el-table {
      th {
        background-color: #0DC26B !important;
        padding: 5px !important;
      }
    }
  }

  .road-name {
    color: #1990FE;
    font-size: 17px;
    font-weight: 600;
  }

  .button-foot {
    margin-top: 10px;
    text-align: center;
    padding: 10px;
  }

  .s-white {
    color: white;
  }

  .big_button {
    margin-bottom: 20px;
    background-color: #1990FE;
    color: white;
    font-size: 15px;
  }

  .btn_edit_gj {
    color: #8c939d;
  }

  .btn_edit_cs {
    color: #1990FE;
    margin-right: 10px !important;
  }

  .btn_edit_xh {
    color: #ff4d51;
  }

  .btn_edit_sb {
    color: #00BFFF;
  }

  .button-submit {
    text-align: right;
    margin-bottom: 5px;
  }

  .btn_edit1640 {
    background-color: rgba(222, 48, 49, 1);
    margin-right: 20px;
    border: none;
  }


</style>
